<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'Bar',
  props: {
    value: Object,
    text: String,
    subtext: String,
    color: {
      type: Array,
      default: () => ['rgba(60, 189, 208, 1)', 'rgba(60, 189, 208, 1)']
    },
    grid: {
      type: Object,
      default: function () {
        return { top: '0%', left: '0%', right: '0%', bottom: '0%' }
      }
    },
    tooltipStyle: {
      type: Object,
      default: function () {
        return { backgroundColor: 'rgba(1, 21, 43, 1)', borderColor: '#45A5E3' }
      }
    },
    dataZoom: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      // let category = Object.keys(this.value.list[0])
      // let dataArr = []
      // for(let i = 0 ;i < this.value.list.length; i++) {
      //   let data = Object.values(this.value.list[i])
      //   dataArr.push(data)
      // }
      if (!this.value.data) return false
      const source = this.value
      const buildSeries = data => {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length)
          arr.splice(index, 1, item)
          return arr
        })

        return [data, ...helper].map((item, index) => {
          return {
            type: 'radar',
            itemStyle: {
              color: this.color[0]
            },
            lineStyle: {
              color: index === 0 ? this.color[0] : 'transparent'
            },
            areaStyle: {
              color: index === 0 ? this.color[0] : 'transparent',
              opacity: 0.3
            },
            tooltip: {
              show: index !== 0,
              formatter: function (params) {
                return source.indicator[index - 1].name + '：' + source.data[index - 1]
              },
              borderWidth: 1,
              borderRadius: 10,
              ...this.tooltipStyle
            },
            z: index === 0 ? 1 : 2,
            data: [item]
          }
        })
      }

      const option = {
        // backgroundColor: '#080b30',
        tooltip: {},
        grid: {
          top: this.grid.top,
          left: this.grid.left,
          right: this.grid.right,
          bottom: this.grid.bottom,
          containLabel: true
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              fontSize: 14,
              color: ['#000'],
              padding: [3, 2]
            }
            // 指示器文字换行 start
            // formatter: function (text) {
            //   var strlength = text.length
            //   if (strlength % 4 !== 0) {
            //     text = text.replace(/\S{4}/g, function (match) {
            //       console.log(match)
            //       return match + '\n'
            //     })
            //   } else {
            //     text = text.replace(/\S{4}/g, function (match) {
            //       console.log(match)
            //       return match + '\n'
            //     })
            //     strlength = text.length
            //     text = text.substring(0, strlength - 1)
            //   }
            //   return text
            // }
          },
          radius: '60%',
          splitNumber: 4,
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                'rgba(219, 219, 219, 0)',
                'rgba(219, 219, 219,0.3)',
                'rgba(219, 219, 219,0)',
                'rgba(219, 219, 219,0)'
              ]
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e6e6e6'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#e6e6e6'
            }
          },
          indicator: source.indicator
        },
        series: buildSeries(source.data)
      }
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    },
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    },
    dataZoom: {
      handler(newVal, oldVal) {
        this.init()
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
</style>
